<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>在线支付</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="csrf_token" id="token" content="{{ csrf_token() }}">
    @include('public.h5_head')
    <link rel="stylesheet" type="text/css" href="{{ env('CDN_DOMAIN_NAME') }}/css/commoncss/common.css"/>
    <link rel="stylesheet" type="text/css" href="{{ env('CDN_DOMAIN_NAME') }}/css/payment.css"/>
    <script src="{{ env('CDN_DOMAIN_NAME') }}/js/commonjs/rem.js"></script>
    <style>
        .pro_num{width:100%;height:1.4rem;line-height:1.4rem;color:#383838;font-size:0.64rem;float:left;}
        .pro_p1{float:left;}
        .pro_p2{float:right;}
    </style>
</head>
<script src="{{ env('CDN_DOMAIN_NAME') }}/js/app.js"></script>
<script>

</script>
<body>
<div id="payment">
    <div class="payment_tit">在线支付</div>
    <div class="payment_time" style="height:10.5rem;">
        <p class="payment_txt">剩余支付时间</p>
        {{--<p class="payment_surplus"><span class="order_time time_h"><script>document.write(getTime('h'));</script></span>:<span class="order_time time_m"><script>document.write(getTime('m'));</script></span>:<span class="order_time time_s"><script>document.write(getTime('s'));</script></span></p>--}}
        <p class="payment_surplus"><span class="order_time time_h">12</span>:<span class="order_time time_m">12</span>:<span class="order_time time_s">12</span></p>
        <div class="payment_detail" style="height:5.6rem;">
            <div class="pro_num"><p class="pro_p1">品牌</p><p class="pro_p2 order_brand"></p></div>
            <div class="pro_num"><p class="pro_p1">款号</p><p class="pro_p2 order_girard"></p></div>
            <div class="pro_num"><p class="pro_p1">数量</p><p class="pro_p2 order_num"></p></div>
            <div class="pro_num" style="color:#ea294b;"><p class="pro_p1">总金额</p><p class="pro_p2 order_prices"></p></div>
        </div>
    </div>
    <div class="payment_tit2">支付方式</div>
    <div class="payment_pic">
        <div class="payment_div1"></div>
        <div class="payment_div2">支付宝</div>
    </div>
    <div class="payment_btn">
        <div class="payment_sure user_pay">确认支付￥价格</div>
    </div>
    <div class="mask" style="display:none;"></div>
</div>
</body>
<script>


    /*页面初始化*/
    var url=window.location.href;
    var ordernum=url.split("=")[1];
    $.ajax({
        url:'/transition-info',
        type:'post',
        data:{
            ordernum:ordernum
        },
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
        },
        dataType:'json',
        success:function(data){
            console.log(data);
            if(data.result.success){
                var res=data.content;
                $(".order_brand").text(res.brand);
                $(".order_girard").text(res.girard);
                $(".order_num").text(res.num+'件');
                $(".order_prices").text('￥'+res.total_price);
                $(".user_pay").text('确认支付￥'+res.total_price);

                $(".payment_btn").attr("abc",res.total_price);
                /*时间倒计时*/
                var repaytime=res.start_time;
                console.log(repaytime);
                var endTime=Number(repaytime)+10*60;
                var nowTime = '{{ time() }}';
                var countDown = (endTime - nowTime);
                if(countDown < 0){
                    $(".time_h").text("00");
                    $(".time_m").text("00");
                    $(".time_s").text("00");
                }else{
                    //获取小时
                    var oHours = parseInt(countDown/(60*60)%24);
                    //获取分钟
                    var oMinutes = parseInt(countDown/60%60);
                    //获取秒
                    var oSeconds = parseInt(countDown%60);
                    $(".time_h").text( p(oHours) );
                    $(".time_m").text( p(oMinutes) );
                    $(".time_s").text( p(oSeconds) );
                }

                var times = '{{ time() }}';
                function newTime(times) {
                    var sureMoney=$(".payment_btn").attr("abc");
                    var nowTime = times;
                    var countDown = (endTime - nowTime);
                    if(countDown < 0) {
                        $('.order_time').css('color','red');
                        $('.payment_btn').html('<div class="payment_sure">确认支付￥'+sureMoney+'</div>');
                        $('.payment_sure').css('background','#ccc');
                        return false;
                    }
                    //获取小时
                    var oHours = parseInt(countDown/(60*60)%24);
                    //获取分钟
                    var oMinutes = parseInt(countDown/60%60);
                    //获取秒
                    var oSeconds = parseInt(countDown%60);
                    $('.time_h').text(p(oHours));
                    $('.time_m').text(p(oMinutes));
                    $('.time_s').text(p(oSeconds));
                    setTimeout(function(){
                        newTime(parseInt(nowTime)+ 1)
                    },1000)
                }
                newTime(times);
            }else{
                $(".faceImg").attr("src","/img/weep.png");
                $(".oHandle").text(data.result.errorMsg);
                $(".oSuccess").show(0).delay(1000).hide(0);
            }
        }
    });
    $('.user_pay').click(function () {
        var url=window.location.href;
        var orNum=url.split("=")[1];
        window.location.href = '/alipay/index?ordernum='+orNum+'';
    });
    function p(n) {
        return n < 10 ? '0'+ n : n;
    }
</script>
</html>

